<template>
  <Card>
    <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
      <Form-item label="月份：" prop="month">
        <DatePicker
          v-model="searchForm.month"
          placeholder="请选择月份"
          placement="bottom-end"
          style="width: 200px"
          type="month"
          @on-change="searchForm.month=$event"
        ></DatePicker>
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="getAttendancePersonnelList()">搜索</Button>
        <Button @click="handleReset()">重置</Button>
      </Form-item>
    </Form>
    <div class="btns" style="margin-bottom:10px;">
      <Button icon="md-cloud-upload" type="primary" @click="readyToImport">开始导入</Button>
    </div>
    <div class="demo-spin-container">
      <a-tabs :default-active-key="defaultActiveKey">
        <a-tab-pane
          v-for="item in attendancePersonnel"
          :key="item.value"
          :tab="item.label"
        >
          <Table :columns="item.columns" :data="item.data" border height="600" size="small"></Table>
        </a-tab-pane>
      </a-tabs>
      <div v-if="showNoneData" style="height: 300px;text-align: center;line-height: 300px;">
        <span>暂无数据</span>
      </div>
      <Spin v-if="spinShow" fix>
        <Icon class="demo-spin-icon-load" size="18" type="ios-loading"></Icon>
        <div>加载中</div>
      </Spin>
    </div>
    <Modal v-model="modal" :closable="false" :mask-closable="false" width="360">
      <p slot="header" style="color:#2d8cf0;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>文件上传成功，正在导入数据</span>
      </p>
      <div style="text-align:center">
        <Button :loading="importLoading" long size="large" type="error">导入中...</Button>
      </div>
      <div slot="footer"></div>
    </Modal>
    <Modal v-model="modalVisible" :mask-closable="false" :width="500" title="导入">
      <Form ref="form" v-model="form" label-position="top">
        <FormItem label="选择导入模板：" prop="table_name">
          <label>
            <Select v-model="form.table_name">
              <Option v-for="item in tableNames" :key="item.value" :value="item.value">{{ item.label }}</Option>
            </Select>
          </label>
        </FormItem>
        <FormItem label="月份：" prop="month">
          <DatePicker v-model="form.month" placeholder="请选择月份" type="month" @on-change="form.month=$event"></DatePicker>
        </FormItem>
      </Form>
      <div slot="footer">
        <upload-file ref="uploadCardFile" button-name="导入" @on-change="uploadData($event)"></upload-file>
      </div>
    </Modal>
  </Card>
</template>
<script>
import {importPayData, payImportDataList} from '../../../api/newPay'
import UploadFile from '../../my-components/upload-file'

export default {
  components: {
    UploadFile
  },
  data() {
    return {
      modal: false,
      spinShow: false,
      showNoneData: false,
      importLoading: false,
      defaultActiveKey: '',
      attendancePersonnel: [],
      searchForm: {
        month: ''
      },
      form: {
        table_name: '',
        month: '',
      },
      modalVisible: false,
      tableNames: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getAttendancePersonnelList()
    },
    prefixZero(num, n) {
      return (Array(n).join(0) + num).slice(-n)
    },
    instance(count) {
      const title = '导入结果'
      const content = '导入数据行数：' + count
      this.$Modal.success({
        title: title,
        content: content
      })
    },
    uploadData(event) {
      this.modal = true
      this.importLoading = true
      importPayData({url: event.url, form: this.form})
        .then(res => {
          if (res.data.result) {
            this.$Message.success(res.message)
            this.getAttendancePersonnelList()
            this.instance(res.data.count)
          } else {
            this.$Message.error(res.message)
          }
          this.modal = false
          this.modalVisible = false
          this.importLoading = false
        })
        .catch(error => {
          this.$Message.error('导入失败')
          this.modal = false
          this.modalVisible = false
          this.importLoading = false
        })
    },
    getAttendancePersonnelList() {
      this.spinShow = true
      payImportDataList(this.searchForm).then(res => {
        this.attendancePersonnel = res.data.result
        this.defaultActiveKey = res.data.defaultActiveKey
        this.showNoneData = (res.data.result).length === 0
        this.tableNames = res.data.tables
        if (!this.searchForm.month) {
          this.searchForm.month = res.data.month
        }
        this.spinShow = false
      })
    },
    handleReset() {
      this.searchForm = {
        month: ''
      }
      this.attendancePersonnel = []
      this.getAttendancePersonnelList()
    },
    readyToImport() {
      this.form.table_name = ''
      this.form.month = ''
      this.modalVisible = true
    }
  }
}
</script>
<style>
.ivu-table .cell-green {
  background-color: #6ab88b;
  color: #fff;
}

.ivu-table .cell-error {
  background-color: #f5b977;
  color: #fff;
}

.ivu-table .cell-danger {
  background-color: #ff7073;
  color: #fff;
}

.ivu-table .cell-info {
  background-color: #7c8489;
  color: #fff;
}

.ivu-table .cell-other {
  background-color: #515a6e;
  color: #fff;
}

.demo-spin-container {
  display: inline-block;
  width: 100%;
  height: 300px;
  position: relative;
  border: 1px solid #eee;
}

.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
</style>
